<template>
	<view class="mycenterEdit">
		<view class="mycenterEditHead" @click="cli_upimg(1)">
			<view class="mycenterEditHeadImgWrap" v-if="factoryImages" >
				<image class="mycenterEditHeadImg" :src="factoryImages" mode=""></image>
				<image class="mycenterEditHeadBoxImg" src="../../../static/manufacturers/camera.png" mode=""></image>
			</view>
			<view v-else class="mycenterEditHeadBox" @click="cli_headImg">
				<view class="mycenterEditHeadBoxImgB">
					
				</view>
				<image class="mycenterEditHeadBoxImg" src="../../../static/manufacturers/camera.png" mode=""></image>
			</view>
		</view>
		<view class="mycenterEditMain">
			<view class="mycenterEditLi">
				<view class="mycenterEditLiTitle">
					厂家名称
				</view>
				<view class="mycenterEditLiCen">
					<input class="mycenterEditLiCenInput" v-model="factoryName" placeholder-class="inputplace" placeholder="请输入厂家名称" type="text" value="" />
				</view>
				<view class="mycenterEditLiRight">
					<!-- <image class="mycenterEditLiRightImg" src=".https://www.zzzsyh.com/applets/agent/agent/right-two.png" mode=""></image> -->
				</view>
			</view>
			<view class="mycenterEditLi disabled">
				<view class="mycenterEditLiTitle">
					联系方式
				</view>
				<view class="mycenterEditLiCen">
					<input style="font-weight: normal !important;" class="mycenterEditLiCenInput" v-model="factoryPhone" placeholder-class="inputplace" placeholder="请输入联系方式" type="text" value="" disabled />
				</view>
				<view class="mycenterEditLiRight">
					<!-- <image class="mycenterEditLiRightImg" src=".https://www.zzzsyh.com/applets/agent/agent/right-two.png" mode=""></image> -->
				</view>
			</view>
			<view class="mycenterEditLi disabled">
				<view class="mycenterEditLiTitle">
					联系人
				</view>
				<view class="mycenterEditLiCen">
					<input style="font-weight: normal !important;" class="mycenterEditLiCenInput" v-model="factoryPerson" placeholder-class="inputplace" placeholder="请输入联系人" type="text" value="" disabled />
				</view>
				<view class="mycenterEditLiRight">
					<!-- <image class="mycenterEditLiRightImg" src=".https://www.zzzsyh.com/applets/agent/agent/right-two.png" mode=""></image> -->
				</view>
			</view>
			<view class="mycenterEditLi">
				<view class="mycenterEditLiTitle">
					邮箱
				</view>
				<view class="mycenterEditLiCen">
					<input class="mycenterEditLiCenInput" v-model="factoryEmail" placeholder-class="inputplace" placeholder="请输入邮箱" type="text" value="" />
				</view>
				<view class="mycenterEditLiRight">
					<!-- <image class="mycenterEditLiRightImg" src=".https://www.zzzsyh.com/applets/agent/agent/right-two.png" mode=""></image> -->
				</view>
			</view>
			<view class="mycenterEditLi" @click="cli_goaddress">
				<view class="mycenterEditLiTitle">
					所属区域
				</view>
				<view class="mycenterEditLiCen font_blod">
					{{pName}}{{cName}}{{aName}}
				</view>
				<view class="mycenterEditLiRight">
					<image class="mycenterEditLiRightImg" src=".https://www.zzzsyh.com/applets/agent/agent/right-two.png" mode=""></image>
				</view>
			</view>
			<view class="mycenterEditLi">
				<view class="mycenterEditLiTitle">
					详细地址
				</view>
				<view class="mycenterEditLiCen">
					<input class="mycenterEditLiCenInput" v-model="factoryAddress" placeholder-class="inputplace" placeholder="请输入详细地址" type="text" value="" />
				</view>
				<view class="mycenterEditLiRight">
					<!-- <image class="mycenterEditLiRightImg" src=".https://www.zzzsyh.com/applets/agent/agent/right-two.png" mode=""></image> -->
				</view>
			</view>
			<view class="mycenterEditLi">
				<view class="mycenterEditLiTitle">
					用户协议
				</view>
				<view class="mycenterEditLiCen">

				</view>
				<view class="mycenterEditLiRight">
					<image class="mycenterEditLiRightImg" src="https://www.zzzsyh.com/applets/agent/agent/right-two.png" mode=""></image>
				</view>
			</view>
			<view class="mycenterEditPhone" @click="cli_upimg(2)">
				<view class="mycenterEditPhoneTitle">
					营业执照
				</view>
				<view class="mycenterEditPhoneImg">
					<image v-if="factoryLicence" class="mycenterEditPhoneImgg" :src="factoryLicence" mode=""></image>
					<image v-else class="mycenterEditPhoneImggPhone" src="../../../static/manufacturers/camera.png" mode=""></image>
				</view>
			</view>
		</view>

		<view class="mycenterEditBtm">
			<view class="mycenterEditBtmOk font_blod" @click="cli_save">
				保存
			</view>
		</view>
		<uni-popup ref="popup" type="bottom" :mask-click="false">
			<view class="add-pop-btm">
				<view class="apb-head">
					<text></text>
					<text class="apb-head-txt">所在地区</text>
					<image class="apb-head-img" src="https://www.zzzsyh.com/applets/agent/agent/close.png" mode="" @click="cli_closePop">
					</image>
				</view>
				<view class="apd-chan">
					<view class="apd-chan-box" v-if="listNum == 2 || listNum == 3 || listNum == 4"
						@click="cli_address_pro">
						<text class="apd-chan-txt">{{pName}}</text>
						<!-- <view class="apd-chan-btm" :class="{apdChanBtmColor : colorNum == 1}"></view> -->
					</view>
					<view class="apd-chan-box" v-if="listNum == 3 || listNum == 4" @click="cli_address_city">
						<text class="apd-chan-txt">{{cName}}</text>
						<!-- <view class="apd-chan-btm" :class="{apdChanBtmColor : colorNum == 2}"></view> -->
					</view>
					<view class="apd-chan-box" v-if="listNum == 4" @click="cli_address_country">
						<text class="apd-chan-txt">{{aName}}</text>
						<!-- <view class="apd-chan-btm" :class="{apdChanBtmColor : colorNum == 3}"></view> -->
					</view>
					<view class="apd-chan-box" v-if="show_title">
						<text class="apd-chan-txt">请选择</text>
						<view class="apd-chan-btm apdChanBtmColor"></view>
					</view>
				</view>
				<view class="apd-li-box">
					<scroll-view scroll-y="true" class="scroll-Y">
					<view class="apd-li" v-if="listNum == 1" v-for="(item, index) of list_pro" :key="index"
						@click="cli_pop_li1(item, index)">
						<text :class="{apdLiTxt : popImgNum1 == index}">{{item.areaName}}</text>
						<image class="apd-li-img" v-show="popImgNum1 == index" src="../../static/mycenter/15.png"
							mode=""></image>
					</view>
					<view class="apd-li" v-if="listNum == 2" v-for="(item, index) of list_city" :key="index"
						@click="cli_pop_li2(item, index)">
						<text :class="{apdLiTxt : popImgNum2 == index}">{{item.areaName}}</text>
						<image class="apd-li-img" v-show="popImgNum2 == index" src="../../static/mycenter/15.png"
							mode=""></image>
					</view>
					<view class="apd-li" v-if="listNum == 3" v-for="(item, index) of list_country" :key="index"
						@click="cli_pop_li3(item, index)">
						<text :class="{apdLiTxt : popImgNum3 == index}">{{item.areaName}}</text>
						<image class="apd-li-img" v-show="popImgNum3 == index" src="../../static/mycenter/15.png"
							mode=""></image>
					</view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import allapi from '../api/index.js'
	export default {
		data() {
			return {
				factoryId: uni.getStorageSync('id_factory'),
				factoryImages: '',
				factoryLicence: '',
				factoryName: '',
				factoryPhone: '',
				factoryPerson: '',
				factoryEmail: '',
				factoryAddress: '',
				pCode: '',
				pName: '',
				cCode: '',
				cName: '',
				aCode: '',
				aName: '',
				popImgNum1: -1,
				popImgNum2: -1,
				popImgNum3: -1,
				listNum: 1,
				list_pro: [],
				list_city: [],
				list_country: [],
			}
		},
		mounted() {
			// 获取厂家信息
			this.getFactoryId(),
			// 获取地址
			this.get_getAreaByPid('', 1)
		},
		methods: {
			// 点击上传图片
			// 上传照片
			cli_upimg(val) {
				let _that = this
				uni.chooseImage({
					count:1,
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: allapi.upload, //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								console.log(uploadFileRes.data);
								let dat = uploadFileRes.data
								let msg = JSON.parse(dat)
								let imgurl = msg.url
								if (val == 1) {
									_that.factoryImages = imgurl
								}else if (val == 2) {
									_that.factoryLicence = imgurl
								}
								// console.log(_that.factoryImages, _that.factoryLicence);
							}
						});
					}
				});
			},
			// 点击打开地址弹窗
			cli_goaddress() {
				this.show_title = true
				this.listNum = 1
				this.popImgNum1 = -1
				this.popImgNum2 = -1
				this.popImgNum3 = -1
				this.$refs.popup.open()
			},
			// 点击关闭弹窗
			cli_closePop() {
				this.$refs.popup.close()
			},
			// 点击所在省市县
			cli_address_pro() {
				this.listNum = 1
			},
			cli_address_city() {
				this.listNum = 2
			},
			cli_address_country() {
				this.cli_address_country = false
				this.listNum = 3
			},
			// 点击地址列表
			cli_pop_li1(item, index) {
				this.popImgNum1 = index
				this.get_getAreaByPid(item.id, 2)
				this.listNum = 2
				this.pName = item.areaName
				this.pCode = item.id
			},
			cli_pop_li2(item, index) {
				this.popImgNum2 = index
				this.get_getAreaByPid(item.id, 3)
				this.listNum = 3
				this.cName = item.areaName
				this.cCode = item.id
			},
			cli_pop_li3(item, index) {
				this.popImgNum3 = index
				this.listNum = 4
				this.show_title = false
				this.aName = item.areaName
				this.aCode = item.id
				this.$refs.popup.close()
			},
			// 获取地址信息
			get_getAreaByPid(pid, num) {
				let _that = this
				uni.request({
					url: allapi.getAreaByPid,
					data: {
						pid: pid
					},
					success: (res) => {
						let dat = res.data.data
						// console.log(dat);
						if (num == 1) {
							_that.list_pro = dat
						} else if (num == 2) {
							_that.list_city = dat
						} else if (num == 3) {
							_that.list_country = dat
						}
					}
				})
			},
			// 获取厂家信息
			getFactoryId() {
				uni.request({
					url: allapi.getFactoryId,
					data: {
						factoryId: this.factoryId
					},
					success: (res) => {
						console.log(res);
						let dat = res.data.data
						this.factoryImages = dat.factoryImages
						this.factoryLicence = dat.factoryLicence
						this.factoryName = dat.factoryName
						this.factoryPerson = dat.factoryPerson
						this.factoryPhone = dat.factoryPhone
						this.factoryEmail = dat.factoryEmail
						this.factoryAddress = dat.factoryAddress
						this.pCode = dat.factoryProvice
						this.pName = dat.factoryProvinceName
						this.cCode = dat.factoryCity
						this.cName = dat.factoryCityName
						this.aCode = dat.factoryDistrict
						this.aName = dat.factoryDistrictName
					}
				})
			},
			// 点击保存
			cli_save () {
				this.updateFactory()
			},
			// 修改厂家信息
			updateFactory () {
				uni.request({
					url: allapi.updateFactory,
					data: {
						factoryId: this.factoryId,
						factoryImages: this.factoryImages,
						factoryName: this.factoryName,
						factoryPerson: this.factoryPerson,
						factoryPhone: this.factoryPhone,
						factoryEmail: this.factoryEmail,
						factoryAddress: this.factoryAddress,
						pCode: this.pCode,
						pName: this.pName,
						cCode: this.cCode,
						cName: this.cName,
						aCode: this.aCode,
						aName: this.aName,
					},
					success: (res) => {
						console.log(res);
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						setTimeout( function () {
							uni.navigateBack()
						},1000)
					}
				})
			},
		}
	}
</script>

<style scoped lang="less">
	.mycenterEdit {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background: #FFFFFF;
		display: flex;
		flex-direction: column;
	}

	.mycenterEditHead {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.mycenterEditHeadBox {
		width: 176rpx;
		height: 176rpx;
		/* background: #000000; */
		border-radius: 50%;
		background-image: url('https://www.zzzsyh.com/applets/agent/factory/20.png');
		background-size: 100%;
		background-repeat: no-repeat;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}
	.mycenterEditHeadImgWrap{
		width: 176rpx;
		height: 176rpx;
		border-radius: 50%;
		position: relative;
	}
	.mycenterEditHeadImg {
		width: 176rpx;
		height: 176rpx;
		border-radius: 50%;
		/* background: #EEEEEE; */
	}
	.mycenterEditHeadImgWrap::before{
		content: "";
		display: inline-block;
		width:100%;
		height: 100%;
		background: rgba(0,0,0,.5);
		border-radius: 50%;
		position: absolute;
		top:0;
		left:0;
		right:0;
		bottom:0;
		
	}
	.mycenterEditHeadBoxImgB {
		width: 176rpx;
		height: 176rpx;
		position: absolute;
		border-radius: 50%;
		background: rgba(0, 0, 0, 0.5);
	}

	.mycenterEditHeadBoxImg {
		position: absolute;
		left: 58rpx;
		top: 58rpx;
		width: 64rpx;
		height: 64rpx;
		z-index: 1;
	}

	.mycenterEditMain {
		flex: 1;
		overflow: auto;
		margin-top: 16rpx;
	}

	.mycenterEditLi {
		margin: 0 32rpx;
		min-height: 96rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #EEEEEE;
		/* background: red; */
		&.disabled{
			.mycenterEditLiCen{
				color:#999999;
				.mycenterEditLiCenInput{
					color:#999999 !important;
				}
				
			}
		}
	}

	.mycenterEditLiTitle {
		font-size: 28rpx;
		font-weight: 400;
		color: #666666;
	}

	.mycenterEditLiCen {
		flex: 1;
		font-size: 28rpx;
		color: #333333;
		text-align: right;
	}
	.mycenterEditLiCenInput {
		/* background: red; */
		margin-left: 10rpx;
		text-align: right;
	}
	.mycenterEditLiRightImg {
		width: 32rpx;
		height: 32rpx;
	}

	.mycenterEditLiRight {
		width: 48rpx;
		text-align: right;
	}

	.mycenterEditPhone {
		margin: 28rpx 32rpx;
	}

	.mycenterEditPhoneTitle {
		font-size: 28rpx;
		color: #666666;
		font-weight: 400;
	}

	.mycenterEditPhoneImg {
		margin-top: 32rpx;
		width: 304rpx;
		height: 188rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		/* background: #EEEEEE; */
	}

	.mycenterEditPhoneImgg {
		width: 304rpx;
		height: 188rpx;
		background: #EEEEEE;
	}
	.mycenterEditPhoneImggPhone {
		/* position: absolute; */
		width: 50rpx;
		height: 50rpx;
	}
	.mycenterEditBtm {
		margin-bottom: 50rpx;
		margin-top: 10rpx;
	}

	.mycenterEditBtmOk {
		margin: 0 40rpx;
		height: 92rpx;
		line-height: 92rpx;
		text-align: center;
		background: #5DD4D6;
		border-radius: 46rpx;
		font-size: 36rpx;
		color: #FFFFFF;
	}
	
	.add-pop-btm {
		width: 100%;
		height: 960rpx;
		background: #fff;
		border-top-right-radius: 24rpx;
		border-top-left-radius: 24rpx;
	}
	
	.apb-head {
		height: 92rpx;
		align-items: center;
		display: flex;
		justify-content: space-between;
		margin: 0 24rpx;
	}
	
	.apb-head-txt {
		color: #333333;
		font-size: 30rpx;
	}
	
	.apb-head-img {
		width: 48rpx;
		height: 48rpx;
	}
	
	.apd-chan {
		height: 96rpx;
		align-items: center;
		display: flex;
		font-size: 28rpx;
		color: #333333;
		padding: 0 24rpx;
		border-top: 2rpx solid #DDDDDD;
		border-bottom: 2rpx solid #DDDDDD;
	}
	
	.apd-chan-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-right: 48rpx;
	}
	
	.apd-chan-txt {
		height: 56rpx;
		line-height: 56rpx;
		margin-bottom: 6rpx;
	}
	
	.apd-chan-btm {
		width: 56rpx;
		height: 4rpx;
		background: #FFFFFF;
		border-radius: 2rpx;
	}
	
	.apdChanBtmColor {
		background: #F76B1F !important;
	}
	
	.apd-li-box {
		padding: 20rpx 24rpx;
		overflow: auto;
		height: 620rpx;
	}
	
	.apd-li {
		height: 80rpx;
		color: #333333;
		line-height: 80rpx;
		font-size: 28rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.apdLiTxt {
		color: #F76B1F !important;
	}
	
	.apd-li-img {
		width: 40rpx;
		height: 30rpx;
	}
</style>
